<template>
  <div v-show="$route.name === 'material-purchase-detail'">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/apply-list' }" v-if="come === 'apply-list'">申请记录</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/applied-list' }" v-else-if="come === 'applied-list'">已审批记录</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/material-purchase' }" v-else>原料采购单</el-breadcrumb-item>
      <el-breadcrumb-item>原料采购详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域--订单数据修改 -->
    <el-card>
      <div style="margin-bottom: 20px;">原料采购详情</div>
      <!-- 搜索与添加区域 -->
      <el-form :model="saveForm"
      ref="saveFormRef"
      label-width="110px">
        <el-row>
          <el-col :span="7">
            <el-form-item label="日期" prop="default_time" style="width: 300px;">
              <el-date-picker type="date" placeholder="选择日期" v-model="saveForm.default_time" readonly>
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="17">
            <el-form-item label="供应商" prop="supplier" style="width: 300px;">
              <el-input v-model="saveForm.supplier" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 商品表格 -->
        <el-row>
          <el-card>
            <!-- 商品列表区域 -->
            <el-table :data="saveForm.productList" border stripe height="300" v-loading="loading">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column label="分类" prop="category_name"></el-table-column>
              <el-table-column label="商品" prop="name"></el-table-column>
              <el-table-column label="是否可销售" prop="sellable">
                <template slot-scope="scope">
                  {{scope.row.sellable ? '是' : '否'}}
                </template>
              </el-table-column>
              <el-table-column label="入库价格" prop="price_in" v-if="groupid === 0 || groupid === 2"></el-table-column>
              <el-table-column label="入库数量" prop="count_in"></el-table-column>
              <el-table-column label="入库单位" prop="unit_in"></el-table-column>
              <el-table-column label="售出单位" prop="unit"></el-table-column>
              <el-table-column label="转换比例" prop="conversion"></el-table-column>
              <el-table-column label="总价" prop="total_amount" v-if="groupid === 0 || groupid === 2"></el-table-column>
              <el-table-column label="备注" prop="comment"></el-table-column>
            </el-table>
          </el-card>
        </el-row>
        <el-row v-if="saveForm.status === 3">
          <el-alert 
            title="驳回信息"
            type="warning"
            :description="saveForm.comment"
            show-icon
            style="margin-top: 10px;">
          </el-alert>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button  @click="back" style="margin-left: 5px;margin-top: 10px;">返回</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      groupid: '',
      orderId: '',
      come: '',
      loading: false,
      saveForm: {
        productList: [],
        supplier: '',
        default_time: '',
        status: '',
        comment: ''
      }
    }
  },
  mounted() {
    this.getUserInfo()
    this.getHouseInData()
  },
  methods: {
    // 获取用户信息
    async getUserInfo() {
      const { data: result } = await this.$http.get('/user/' + localStorage.userid)
      if (result.status !== 200) return this.$message.error(result.msg)
      this.groupid = result.data.groupid * 1
    },
    getHouseInData() {
      if (this.$route.params.orderId) {
        this.orderId = this.$route.params.orderId
        this.come = this.$route.params.come
        localStorage.setItem('houseInId', this.$route.params.orderId)
      } else {
        this.orderId = localStorage.getItem('houseInId')
      }
      if (this.orderId) {
        this.loading = true
        this.getHouseIn(this.orderId)
      }
    },
    async getHouseIn(orderId) {
      const { data: result } = await this.$http.get('/house-in/' + orderId)
      if (result.status !== 200) {
        this.loading = false
        return this.$message.error(result.msg)
      }
      this.loading = false
      this.saveForm.productList = result.data.productList
      this.saveForm.supplier = result.data.supplier
      this.saveForm.default_time = result.data.default_time
      this.saveForm.status = result.data.status
      this.saveForm.comment = result.data.comment
    },
    back () {
      localStorage.removeItem('houseInId')
      this.$router.push({ 
        'name': this.come, 
        'params': { tab: 'second' } 
      })
    },
  }
}
</script>